<template>
    <div id="progressLoad">
        <el-dialog
        :visible.sync="isShow"
        width="40%"
        :close-on-click-modal="types=='create'"
        :before-close="handleClose"
        >
            <div class="title">
                <img :src="require('@/assets/images/ai.png')" alt="">
                <div class="text">{{types=="create"?`预计需要 ${predictTime.startTime}~${predictTime.endTime}分钟，`:''}}{{types=="create"?'二维码生成中':'正在下载中'}}{{goto}}</div>
            </div>
            <el-progress :text-inside="true" :stroke-width="26" :percentage="progress"></el-progress>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props:{
            types:{
                type:String,
                default:"download"
            },
            isShow:{
                type:Boolean,
                default:false
            },
            progress:{
                type:Number,
                default:0
            },
            predictTime:{
                type:Object,
                default:()=>{return {}}
            }
        },
        data(){
            return {
                goto:'',
                setIntervalID:''
            }
        },
        created(){
            this.setIntervalID = setInterval(()=>{
                if(this.goto.length == 3){
                    this.goto = ''
                }else{
                    this.goto += '.'
                }
            },1000)
        },
        watch:{
           progress(newData,old){
               console.log(newData,'newDatanewData')
           },
           isShow(newData,old){
               if(!newData){
                   clearInterval(this.setIntervalID._id)
               }
           }
        },
        methods:{
            handleClose(){
                this.$emit('close',false)
                clearInterval(this.setIntervalID._id)
            }
        },
        beforeDestroy(){
            clearInterval(this.setIntervalID._id)
        }
    }
</script>

<style lang="scss">
#progressLoad{
    width: 100%;
    height: 100%;
    .title{
        display: flex;
        margin-bottom:40px;
        img{
            width: 30px;
            height: 30px;
            display: block;
        }
        .text{
            height: 30px;
            line-height: 30px;
            color: rgba(0, 0, 0, 0.85);
            font-size: 20px;
            margin-left: 10px;
        }
    }
    .el-dialog{
        margin-top: 35vh !important;
    }
    .el-dialog__header{
        display: none !important;
    }
    .el-dialog__body{
        padding: 43px 63px 60px;
    }
    .el-progress-bar{
        width: 80% !important;
        margin-left:39px !important;
    }
}
</style>